<template>
    <div class="chat-container">
      <div class="chat-header">
        <h1>Conversation</h1>
      </div>
      <div class="chat-body">
        <div v-for="(msg, index) in messages" :key="index" :class="msg.role">
          <div class="message-bubble">
            {{ msg.content }}
          </div>
        </div>
      </div>
      <div class="chat-footer">
        <input type="text" v-model="userInput" placeholder="输入你的问题..." @keyup.enter="sendMessage" />
        <button @click="sendMessage">Send</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  
  let userInput = ref('');
  let messages = ref([]);
  
  const sendMessage = async () => {
    const trimmedInput = userInput.value.trim();
    if (!trimmedInput) {
      alert('请输入问题');
      return;
    }
  
    // 使用对象形式添加用户消息
    messages.value.push({
      role: 'user',
      content: trimmedInput
    });
  
    userInput.value = '';
  
    try {
      const response = await axios.post('http://127.0.0.1:8000/app/conversation/', {
        user_input: trimmedInput,
        messages: messages.value
      });
  
      if (response.data.code === 200) {
        messages.value.push({
          role: 'assistant',
          content: response.data.message
        });
      } else if (response.data.code === 10010) {
        messages.value.push({
          role: 'assistant',
          content: '对话结束'
        });
      } else {
        messages.value.push({
          role: 'error',
          content: 'Error: ' + response.data.message
        });
      }
    } catch (error) {
      console.error('Error sending message:', error);
      messages.value.push({
        role: 'error',
        content: '无法发送消息，请稍后再试。'
      });
    }
  };
  </script>
  
  <style scoped>
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .chat-header {
    background-color: #ffffff;
    color: #333333;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  
  .chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .chat-footer {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
    background-color: #f5f5f5;
  }
  
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    margin-right: 10px;
    background-color: #ffffff;
    color: #333333;
    font-size: 14px;
  }
  
  button {
    padding: 10px 20px;
    background-color: #00bfa5;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: #009688;
  }
  
  .user .message-bubble {
    background-color: #e1ffc1;
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 10px;
    text-align: right;
    float: right;
    clear: both;
    max-width: 70%;
    word-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .assistant .message-bubble {
    background-color: #d1e1ff;
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 10px;
    text-align: left;
    float: left;
    clear: both;
    max-width: 70%;
    word-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .error .message-bubble {
    background-color: #ffe1e1;
    color: #b71c1c;
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 10px;
    text-align: center;
    clear: both;
    max-width: 70%;
    word-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  </style>